<template>
  <div>
    <Editor v-model="contentValue" :init="initOption" :disabled="disabled" />
  </div>
</template>
<script>
import http from "@/http/index";
import Editor from "@tinymce/tinymce-vue";
import tinymce from "tinymce/tinymce";
import { ElMessage } from "element-plus";
export default {
  components: {
    Editor,
  },
  data() {
    return {
      initOption: {
        base_url: "/tinymce", //【必要参数】指定public的目录
        language: "zh_CN", //语言类型，默认会到tinymce/langs/zh_CN.js文件
        plugins: this.plugins, //插件配置
        toolbar: this.toolbar, //工具栏配置，设为false则隐藏
        toolbar_mode: "sliding", //工具栏移除模式 floating / sliding / scrolling / wrap
        fontsize_formats:
          "12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px", //字体大小
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;", //字体样式
        lineheight_formats: "0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5", //行高配置，也可配置成"12px 14px 16px 20px"这种形式
        height: 400, //注：引入autoresize插件时，此属性失效
        placeholder: "在这里输入文字",
        branding: false, //tiny技术支持信息是否显示
        resize: false, //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
        elementpath: false, //元素路径是否显示
        content_style: "img {max-width:100%;}", //直接自定义可编辑区域的css样式
        paste_data_images: true, //图片是否可粘贴
        //自定义图片上传逻辑
        images_upload_handler: (blobInfo, success, failure) => {
          const formData = new FormData();
          formData.append("file", blobInfo.blob());
          http
            .upload("http://192.168.1.188:8080/upload/admin", formData)
            .then((res) => {
              success(res.url);
              ElMessage.success("上传成功！");
            })
            .catch((err) => {
              console.log(err);
              failure(err.response.data.message);
              ElMessage.error("上传失败！");
            });
        },
      },
    };
  },
  props: {
    //用于自定义v-model的value，这个名称是固定的
    modelValue: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default:
        "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave ",
    },
    toolbar: {
      type: [String, Array],
      default:
        "fullscreen undo redo restoredraft |  table image media charmap hr pagebreak insertdatetime print preview | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | code selectall searchreplace visualblocks | indent2em lineheight formatpainter axupimgs",
    },
  },
  emits: ["update:modelValue"], //更新modelValue事件
  computed: {
    //富文本框内容
    contentValue: {
      get() {
        //取值
        return this.modelValue;
      },
      set(value) {
        //赋值
        this.$emit("update:modelValue", value);
      },
    },
  },
};
</script>
